<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>basic HTML</title>
    <script>
        function change_head() {
            document.getElementById("myHeader").innerHTML = "Nice day!"
        }
    </script>
</head>
<body>
    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3 name='Bill "HelloWorld" Gates'>This ia a heading</h3>  <!--  属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：-->
    <p>This is a paragrah</p>
    <p>This is another paragrah</p>
    <a href="http://www.baidu.com"></a>
    <img src="w3school.jpg" width="104" height="142"/>

    <!--  HTML 中的全局属性 -->
    <p contenteditable="true">这是一个可编辑的段落</p>  <!--  主流浏览器都支持 -->
    <div contextmenu="mymenu">   <!-- contextmenu 只支持 firfox 所以不用这个 选项  笔者 在实际的firefox 中也没试出这种效果-->
        <menu type="context" id="mymenu">
            <menuitem label="Refresh"></menuitem>
            <menuitem label="Twitter"></menuitem>
        </menu>
    </div>

    <!--
    data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

HTML 4.01 与 HTML5 之间的差异
data-* 属性是 HTML5 中的新属性。
    -->
    <ul>
        <li data-anmail-type="鸟类">喜鹊</li>
        <li data-anmail-type="鱼类">金枪鱼</li>
        <li data-anmail-type="蜘蛛">蝇虎</li>
    </ul>

    <!-- dir 属性在 base br frame frameset hr iframe param script 中无效-->
    <p dir="rtl">Write this text right-to-left</p> <!-- 右边开始往-->
    <br/>
    <p dir="ltr">Write this text left-to-right</p>
    <p draggable="true">这是一个可拖动的段落</p> <!-- true false auto : true 默认是可以拖动的 false 默认不可拖动 auto 使用浏览器默认的行为-->
    <p hidden="hidden">这是一个隐藏的</p> <!-- 测试 hidden 的元素是否占据一行 并没有占据 XTML 中属性简写是禁止的 我们不提倡这样使用 -->
    <p>这是一个隐藏的</p>
    <p hidden></p> <!-- 这是一种属性 简写的行为 -->
    <h1 id="myHeader">Hello Word! </h1>
    <button onclick="change_head()"></button>  <!--  id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。id 属性可用作链接锚（link anchor），
    通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
      -->
    <p lang="en">English hello</p>
    <p lang="zh">你好</p>
    <p spellcheck="true">这是一个拼写检查的段落</p>   <!--  这个拼写检查 有啥用?-->

    <a href="http://wwww.w3cschool.com.cn" tabindex="2">tableIndex_2</a>
    <a href="http://wwww.baidu.com.cn" tabindex="1">tableIndex_1</a>
    <a href="http://wwww.google.com.cn" tabindex="3">tableIndex_3</a> <!--safari 不支持 tableIndex-->

    <abbr title="你好这是标签的提示">PRC</abbr>  was founded in 1949
    <p title="请免费试用">DeLong</p> <!-- title 属性规定关于元素的额外信息。 注意鼠标放上面需要等待一段时间
                                         这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
                                         提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。
                                         同时它也是 abbr 和 acronym 元素的必需属性。 -->
</body>
</html>
































































